<template>
  <v-toolbar color="blue-grey-darken-3">
    <template v-slot:prepend>
      <div class="text-h7">教务管理系统</div>
    </template>

    <v-divider class="ms-3" inset vertical></v-divider>

    <v-spacer></v-spacer>

    <v-spacer></v-spacer>
  </v-toolbar>
  <v-card flat title="学生管理">
    <template v-slot:text>
      <div class="d-flex flex-row">
        <v-combobox
          label="选择课程"
          :items="courses"
          v-model="selectedCourse"
          @update:model-value="select_course()"
        ></v-combobox>
      </div>
    </template>
    <v-btn icon="mdi-plus" @click="addS" style="margin-left: 20px"></v-btn>
    <v-btn icon="mdi-download" @click="downloadcsv" style="margin-left: 10px"></v-btn>
    <v-data-table :headers="headers" :items="items">
      <template v-slot:item="{ item }">
        <tr>
          <td>{{ item.student_id }}</td>
          <td>{{ item.sname }}</td>
          <td>{{ item.grade }}</td>
          <td>{{ item.sex }}</td>
          <td>{{ item.mobile_phone }}</td>
          <td>{{ item.dept_name }}</td>

          <td>
            <v-btn
              variant="text"
              icon="mdi-delete"
              size="40px"
              @click="deleteS(item)"
            ></v-btn>
          </td>
        </tr>
      </template>
    </v-data-table>
  </v-card>
  <v-dialog v-model="resulting" width="auto" persistent>
    <v-card width="400" height="120">
      <v-card-text>
        {{ resmsg }}
      </v-card-text>
      <v-card-actions>
        <v-btn color="primary" block @click="resulting = false">确认</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
  <v-dialog v-model="studentDialog" max-width="500px">
    <v-card>
      <v-card-title>查找学生</v-card-title>
      <v-card-text>
        <v-form>
          <!-- 在这里添加输入框 -->
          <v-text-field
            v-model="stu_searching"
            label="学号"
            @update:model-value="searchStudent"
          ></v-text-field>
          <v-card :text="stu_searching_result"></v-card>
        </v-form>
      </v-card-text>
      <v-card-actions>
        <v-btn @click="add_student">确定</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script>
import axios from "axios";
export default {
  async created() {
    let new_courses = [];
    let staff_id = this.$root.userinfo.id;
    await axios({
      method: "get",
      url: "http://127.0.0.1:8000/teacher/course_query",
      params: {
        staff_id: staff_id,
      },
    }).then((res) => {
      console.log(res);
      new_courses = res.data.data;
    });
    console.log(new_courses);
    let new_courses_name = [];
    for (let i = 0; i < new_courses.length; i++) {
      new_courses_name.push(new_courses[i][0]);
    }
    this.courses = new_courses_name;
    this.courses_data = new_courses;
  },
  data() {
    return {
      //"student_id","sname","grade","sex","mobile_phone","dept_name"
      headers: [
        { key: "student_id", title: "学号" },
        { key: "sname", title: "姓名" },
        { key: "grade", title: "年级" },
        { key: "sex", title: "性别" },
        { key: "mobile_phone", title: "手机号" },
        { key: "dept_name", title: "学院" },
        { key: "select", title: "操作" },
      ],
      items: [],
      courses: [],
      selectedCourse: "",
      studentDialog: false,
      stu_searching: "",
      stu_searching_result: "",
      selectedCourse_data: [],
      resulting: false,
    };
  },
  methods: {
    async select_course() {
      //判断this.selected_course是否为空
      if (!this.selectedCourse) {
        return;
      }
      let staff_id = this.$root.userinfo.id;
      let new_items = [];
      console.log(this.selectedCourse);
      await axios({
        method: "get",
        url: "http://127.0.0.1:8000/teacher/student_query",
        params: {
          course_name: this.selectedCourse,
          staff_id: staff_id,
        },
      }).then((res) => {
        console.log(res);
        new_items = res.data.data;
      });
      this.items = new_items;
      console.log(this.items);
    },
    addS() {
      this.studentDialog = true;
      console.log(this.studentDialog);
    },
    async searchStudent() {
      let student_id = this.stu_searching;
      let result = "";
      await axios({
        method: "get",
        url: "http://127.0.0.1:8000/teacher/search_student",
        params: {
          student_id: student_id,
        },
      }).then((res) => {
        console.log(res);
        result = res.data.data;
      });
      this.stu_searching_result = result;
    },
    async add_student() {
      let student_id = this.stu_searching;
      let course_name = this.selectedCourse;
      let staff_id = this.$root.userinfo.id;
      let class_time = "";
      let semester = this.$root.semester;
      let result_msg = "";
      for (let i = 0; i < this.courses_data.length; i++)
        if (this.courses_data[i][0] == course_name)
          class_time = this.courses_data[i][1];
      await axios({
        method: "get",
        url: "http://127.0.0.1:8000/teacher/add_student",
        params: {
          student_id: student_id,
          course_name: course_name,
          staff_id: staff_id,
          class_time: class_time,
          semester: semester,
        },
      }).then((res) => {
        console.log(res);
        result_msg = res.data.msg;
      });
      this.studentDialog = false;
      this.select_course();
      this.resulting = true;
      this.resmsg = result_msg;
    },
    async deleteS(student) {
      console.log(student);
      let student_id = student.student_id;
      let course_name = this.selectedCourse;
      let semester = this.$root.semester;
      await axios({
        method: "get",
        url: "http://127.0.0.1:8000/teacher/delete_student",
        params: {
          student_id: student_id,
          course_name: course_name,
          semester: semester,
        },
      }).then((res) => {
        console.log(res);
      });
      this.select_course();
    },
    // 生成excel，meta为表数据，data为传入数据，name为生成的文件名称
    createExcel(meta, data, name) {
      // '\n' 表示一行的结束，','表示数据依次放在新的单元格
      let header = "";
      for (let i=0;i<meta.length;i++) {
        header += meta[i] + ",";
      }
      console.log(header);
      let table = header + "\n" ;
      for (let i=0;i<data.length;i++) {
        let line = "";
        for (let j=0;j<meta.length;j++) {
          line += data[i][j] + ",";
        }
        table += line + "\n";
      }
      //encodeURIComponent解决中文乱码
      let uri =
        "data:text/csv;charset=utf-8,\ufeff" + encodeURIComponent(table);
      //通过创建a标签实现
      var link = document.createElement("a");
      link.href = uri;
      //对下载的文件命名
      link.download = name + ".csv";
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    },
    downloadcsv()
    {
        let head=["学号","姓名","学院","手机号"];
        let data=[]
        for(let i=0;i<this.items.length;i++)
        {
            let row=[]
            row.push(this.items[i].student_id)
            row.push(this.items[i].sname)
            row.push(this.items[i].dept_name)
            row.push(this.items[i].mobile_phone)
            data.push(row)
        }
        console.log(head,data)
        this.createExcel(head,data,this.selectedCourse+"学生信息")
    }
  },
};
</script>
